<template>
  <view class="container">
    <view class="login_box pc box-shadow">
      <image class="logo_img" :src="logo" />
      <view class="show_box flex pd10-y" :class="[ focusIndex === 0 ? 'is-focus' : '' ]">
        <!-- <i-icon type="mobilephone_fill" size="28" :color="color"/> -->
        <input
          @focus="focusIndex = 0"
          focus
          class="focusXX"
          v-model="userPhone"
          maxlength="11"
          placeholder="请输入手机号码"
          type="number"
        >
      </view>
      <view class="show_box flex pr pd10-y mgb80" :class="[ focusIndex === 1 ? 'is-focus' : '' ]">
        <!-- <i-icon type="lock_fill" size="28" :color="color"/> -->
        <input
          @focus="focusIndex = 1"
          class="show_inputs"
          v-model="phoneCode"
          type="number"
          placeholder="验证码"
          maxlength="6"
        >
        <CutDown
          style="color:#1a62b6"
          class="btn_code"
          :startVal="120"
          ref="CutDown"
          :disabled="disabled"
          @click="getCodeNum"
        ></CutDown>
      </view>
      <i-button :loading="loading" i-class="btn_submit" 
      type ="success"      
      @click="handleClick">{{editPhone==1?'确定':'绑定'}}</i-button>
    </view>
  </view>
</template>

<script>
import store from "@/store";
// 倒计时
import CutDown from "@/components/CutDown";
import { REQUEST_BASE_URL } from '@/config'
// 正则检验
import { validatePhone } from "@/utils/validate";
import { getPhoneCode, setUserInfo, updatePhone } from "@/api";

export default {
  components: {
    CutDown
  },
  data() {
    return {
      //图片
      logo:'',
      userPhone: "",
      phoneCode: "",
      authorization: "",
      canIUse: false,
      loading: false,
      openId: "",
      focusIndex: 0,
      editPhone: 0,
      number:''
    };
  },
  methods: {
    //发送验证码
    async getCodeNum() {
      // type 1绑定 2修改
        var type = this.userInfo.userPhone ? 2 : 1
      if(this.userInfo.userPhone!=this.userPhone){
        //调用服务器接口
         const { data } = await getPhoneCode({
        type: type,
        userPhone: this.userPhone
      });
      if (data.code === 1) {
        wx.showToast({
          title: "验证码发送成功！",
          icon: "none"
        });
      } }
      else {
        wx.showToast({
          title:"该号码已绑定",
          icon: "none",
          success:function(){
           uni.navigateTo({
              url: "pagesA/info/index"
            })
          },
          complete:function(){
          setTimeout(()=>{
           uni.navigateBack({
            delta: 0
           })
         },2000) 
          }
        }); 
      }
    },

    //绑定手机
    async handleClick() {
      if (!this.isValid.ok){
        uni.showToast({
          title: this.isValid.msg,
          icon: "none"
        });
        return;
      }

      this.loading = true;
      //调用服务器接口 改电话
      const { data } = await updatePhone({
        code:this.phoneCode,
        userPhone:this.userPhone
      })
      if(data.code == 1){
        if(this.editPhone){
          // 修改手机号
          wx.showToast({
            title: "修改成功",
            icon: "none"
          });
          setTimeout(() => {
             uni.navigateTo({
              url: "pagesA/info/index"
            })
          }, 1000);
        }else{
          // 绑定手机号
          wx.showToast({
            title: "绑定成功",
            icon: "none"
          });
          setTimeout(() => {
            uni.switchTab({
              url:`/pages/personal/index`
            })
          }, 1000);
        }
      }else{
           setTimeout(() => {
            uni.navigateTo({
              url: "pagesA/info/index"
            })
          }, 1000);
      }
      this.loading = false;
    }

  },

  // 监听页面初次渲染完成
  onReady(){
    // store.dispatch('getSystemParam',1).then(res =>{
    //   if (res.code === 1) {
    //     this.logo = REQUEST_BASE_URL + res.data.parameter
    // // 强制更新
    // this.$forceUpdate()
    //   }
    // })
  },
  // 监听页面加载，query为上个页面参数
  onLoad() {
    // this.query = { ...query };
    
    // this.userPhone = this.userInfo.userPhone ?  this.userInfo.userPhone : 0


    // var titles = this.userInfo.editPhone?'修改绑定手机号':'修改绑定手机号'
   if(this.userInfo.userPhone){
     uni.setNavigationBarTitle({
      title:"修改绑定手机号",
    });
    }else{
         uni.setNavigationBarTitle({
         title:"绑定手机号",
    });
    }


   
  },

  // 计算属性
  computed: {
    userInfo() {
      return store.state.user.userInfo
    },
    isValid() {
      if (!validatePhone(this.userPhone)) {
        return {
          ok: false,
          msg: "请输入正确手机号"
        };
      }
      if (!this.phoneCode) {
        return {
          ok: false,
          msg: "请输入验证码"
        };
      }
      return { ok: true, msg: "ok" };
    },

    disabled() {
      return !validatePhone(this.userPhone);
    },

    color() {
      return store.state.app.themeColor;
    }

  },
  mounted() {
    const wxUserInfo = wx.getStorageSync("wxUserInfo");
    if (wxUserInfo) {
      this.userInfo = Object.assign({}, this.userInfo, wxUserInfo);
    }
  }
};
</script>

<style lang='stylus'>
@import '../../styles/variable.styl';
.d_cutdonw{
  margin-top: -16upx;
  line-height: 30upx;
}

.logo_img {
  border-radius: 50%;
}

.show_box {
  transition: all 0.3s;
  transform-origin: center center;
  &.is-focus {
    border-color:#1a62b6;
  }
}

.btn_code {
  position: absolute;
  right: 0;
  top: 30%;
  transform: translateY(-50%);
}

page, .container {
  width: 100%;
  height: 100%;
  // background-image: url('~@/assets/bg_1@2x.png');
  background-size: cover;
  background-repeat: no-repeat;
}


.login_box {
  position: relative;
  padding: 160upx 40upx 80upx 40upx;
  background: #fff;
  border-radius: 30upx;
  width: 620upx;
  box-sizing: border-box;
  .btn_submit {
    margin-top: 80upx;
    color #fff!important
    // background #03a4ec!important
    border-radius 14upx!important
  }
}

.show_box {
  border: 0;
  margin-top: 50upx;
  color: #000;
  border-radius: 0;
  border-bottom: 2upx solid rgba(0, 0, 0, 0.1);
}

.detail {
  width: 100%;
  text-align: center;
  font-size: 14px;
  color: rgb(153, 153, 153);
  position: absolute;
  bottom: 160upx;
  white-space: nowarp;
}

.detail-server {
  color: #ff4e00;
}

.show_inputs {
  width: 80%;
}

.logo_img {
  width: 200upx;
  height: 200upx;
  position: absolute;
  top: -100upx;
  left: 50%;
  transform: translateX(-50%);
}

.mgb80 {
  margin-bottom: 80upx;
}
</style>
